<template>
     <div class="tabbar">
      <div class="tabbarList">
        <div class="tabbarItem">
          <img src="@/assets/sthj/img/sthjlogo.png" alt="" />
        </div>
        <div
          class="tabbarItem"
          v-for="(item, index) in tabbarList"
          :key="index"
          @click="topath(item.path,index)"        
        >
            <span  :class="{tabbarActive:activeIndex==index}"> {{ item.title }}</span>
        </div>
        
      </div>
    </div>
</template>

<script>
export default {
    name: 'HcdcpTabbar',

  

    data() {
        return {
             tabbarList: [
        { title: "首页", path: "/home" },
        { title: "生态环境", path: "/sthj" },
        { title: "空气质量", path: "/kqzl" },
        { title: "水环境质量", path: "/shj" },
        { title: "土地环境", path: "/tdhj" },
      ],
      activeIndex:-1
        };
    },

    mounted() {
     
        if(this.$route.meta.tabbar){
            switch(this.$route.meta.tabbar){
              case '首页':
                this.activeIndex=0
                break;
              case '生态环境':
                this.activeIndex=1
                break;
              case '空气质量':
                this.activeIndex=2
                break;
              case '水环境质量':
                this.activeIndex=3
                break;
              case '土地质量':
                this.activeIndex=4
                break;
              default:
                this.activeIndex=-1
                break;
              
            }
        }
        
    },

    methods: {
      topath(path, index) {
      this.$router.push({
        path: path,
        query:{
          activeIndex:index
        }
      });
   
    },
    },
};
</script>

<style lang="less" scoped>
.tabbarActive{
    font-family: PingFangSC-Medium, PingFang SC;
font-weight: 550;
color: #1C7B4D;
border-bottom: 3px solid #10BB68;
border-radius: 2px;
}
.tabbar {
  width: 1920px;  
  height: 60px;
  background: #ffffff;

border-bottom:1px solid #00783E;
  .tabbarList {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .tabbarItem {
      height: 100%;
      line-height: 60px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
      span{
          display: inline-block;
          height: 40px;
          line-height: 40px;
          cursor: pointer;
      }
    }
  }
}
</style>